<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../public/jeasyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../public/jeasyui/themes/material/easyui.css">
    <script type="text/javascript" src="../public/jeasyui/jquery.min.js"></script>
    <script type="text/javascript" src="../public/jeasyui/jquery.easyui.min.js"></script>
    <script src="../public/js/jquery.serializejson.min.js"></script>
    <script src="../public/js/xheditor-1.2.2/xheditor-1.2.2.min.js"></script>
    <script src="../public/js/xheditor-1.2.2/xheditor_lang/zh-cn.js"></script>
    <script src="http://momentjs.com/downloads/moment-with-locales.min.js"></script>
    <title>Document</title>
    <style>
        #ff>span {
            display: none;
        }
    </style>
</head>

<body>
    <div class="easyui-layout" data-options="fit:true">
        <div id="p" data-options="region:'west'" title="产品列表" style="width:15%;padding:10px">
            <ul id="tt">
            </ul>
        </div>
        <div data-options="region:'center'" title="产品">
            <div id="tb" style="padding:2px 5px;">
                <input id="ss" class="easyui-searchbox" style="width:200px;float: left;" data-options="searcher:search,prompt:'请输入产品名称'">
                <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="op(parentId)">添加产品</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="removes()">删除产品</a>
            </div>
            <table id="dg"></table>
            <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:'false'" style="width:500px;height:500px;padding:10px">
                <div class="easyui-panel" title="New Topic" style="width:100%;max-width:450px;padding:30px 60px;">
                    <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
                        <input class="easyui-textbox" name="_id" style="width:100% ;">
                        <input class="easyui-textbox" name="parentId" style="width:100% ;">
                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'产品名称:',required:true">
                        </div>
                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox" name="goodstype" style="width:100%" data-options="label:'产品类型:',required:true">
                        </div>
                        <div style="margin-bottom:20px">
                            是否进口：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input class="easyui-radiobutton" name="import" value="true" label="是" labelWidth=20>
                            <input class="easyui-radiobutton" name="import" value="false" label="否" labelWidth=20>
                        </div>
                        <div style="margin-bottom:20px">
                            <input name="date" class="easyui-datetimebox" label="生产日期:" style="width:100%;">
                        </div>
                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox" name="price" style="width:100%" data-options="label:'价格:',required:true,">
                        </div>
                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox" name="stock" style="width:100%" data-options="label:'库存:',required:true,">
                        </div>
                        <div style="margin-bottom:20px">
                            <input class="easyui-textbox" name="support" style="width:100%" data-options="label:'供应商:',required:true,">
                        </div>

                        <div style="margin-bottom:20px">
                            <select class="easyui-combobox" name="maked" label="生产地:" style="width:100%;">
                                <option value="US">美国</option>
                                <option value="CN">中国</option>
                                <option value="EN">英国</option>
                            </select>
                        </div>

                        <div style="margin-bottom:20px">
                            销售渠道： &nbsp;
                            <input class="easyui-checkbox" name="sale[]" value="网络" label="网络" labelWidth=35>
                            <input class="easyui-checkbox" name="sale[]" value="零售" label="零售" labelWidth=35>
                            <input class="easyui-checkbox" name="sale[]" value="其他" label="其他" labelWidth=35>
                        </div>
                        <div style="margin-bottom:20px">
                            <!-- <input class="easyui-textbox" name="message" style="width:100%;height:60px" data-options="label:'Message:',multiline:true"> -->
                            产品信息:
                            <textarea name="info" class="xheditor"></textarea>
                        </div>
                    </form>
                    <div style="text-align:center;padding:5px 0">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>
<script>
    var parentId;
    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {
                    var jsData = $('#ff').serializeJSON();
                    if (jsData._id) {
                        $.ajax({
                            url: `http://localhost:3000/product/${jsData._id}`,
                            type: 'put',
                            data: jsData,
                        }).done(res => {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            clearForm();
                        })
                    } else {
                        delete jsData._id
                        $.ajax({
                            url: 'http://localhost:3000/product',
                            type: 'post',
                            data: jsData,
                        }).done(
                            res => {
                                $('#dlg').dialog('close');
                                $('#dg').datagrid('reload');
                                clearForm();
                            }
                        );
                    }
                };


            }
        });
    }
    function clearForm() {
        $('#ff').form('clear');
    }
    function deleteData(id) {
        $.messager.confirm('确认对话框', '你确认删除数据?', function (r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/product/${id}`,
                    type: "delete",
                }).done(res => {
                    $('#dg').datagrid('reload')
                }
                );
            }
        })
    }

    //删除多条数据
    function removes() {
        var ids = [];
        var arr = $('#dg').datagrid('getSelections');
        for (var i = 0; i < arr.length; i++) {
            ids.push(arr[i]._id);
        }
        $.messager.confirm('确认对话框', '你确认删除数据?', function (r) {
            if (r) {
                $.ajax({
                    url: 'http://localhost:3000/product/removes',
                    type: 'post',
                    data: {
                        ids: ids.toString()
                    }
                }).done(
                    res => {
                        $('#dg').datagrid('reload')
                    })
            }

        })
    }
    //更新数据
    function updataData(id) {
        $.ajax({
            url: `http://localhost:3000/product/${id}`,
            type: "get",
        }).done(res => {
            $('#dlg').dialog('open');
            console.log(res);
            $('#ff').form('load', res);
        }
        );
    }
    //添加打开模态框
    function op(t) {
        $('#ff').form('load', { parentId: t });
        $('#dlg').dialog('open')
    }
    //渲染数据

    $('#tt').tree({
        url: `http://localhost:3000/cate/list/pro`,
        type: "post",
        onClick: function (node) {
            parentId = node._id;
            var listurl = `http://localhost:3000/product/list/${parentId}`;
            $('#dg').datagrid({
                url: listurl,
                fit: "true",
                border: false,
                pagination: "true",
                toolbar: "#tb",
                columns: [[
                    { field: "ck", checkbox: true },
                    { field: 'name', title: '产品名称', width: 100, },
                    { field: 'goodstype', title: '产品类型', width: 100 },
                    {
                        field: 'import', title: '是否进口', width: 100, align: 'center',
                        formatter: function (value, row, index) {
                            if (row.import == true) {
                                return '进口'
                            } else {
                                return '国产'
                            }
                        }
                    },
                    {
                        field: 'date', title: '生产日期', width: 200, align: 'center',
                        formatter: function (value, row, index) {
                            return (moment(row.date).format('YYYY-MM-DD'));
                        }
                    },

                    {
                        field: 'price', title: '价格', width: 100, align: 'right',
                        formatter: function (value, row, index) {
                            return (row.price.toFixed(2));
                        }
                    },
                    { field: 'stock', title: '库存', width: 100, align: 'right' },
                    { field: 'support', title: '供应商', width: 100 },
                    { field: 'maked', title: '生产地', width: 100 },
                    { field: 'sale', title: '销售渠道', width: 100 },
                    { field: 'reply', title: '评论数', width: 100 },
                    {
                        field: '_id', title: '操作', width: 100, align: 'center',
                        formatter: function (value, row, index) {
                            return `<a href="javascript:void(0)" onclick="searchcomment('${value}')">查看评论</a>  <a href="javascript:void(0)" onclick="updataData('${value}')">修改</a>&nbsp;<a href="javascript:void(0)" onclick="deleteData('${value}')">删除</a>`;
                        }
                    }
                ]]
            });
        }
    });

    search();
    function search(value, name) {
        var listurl = value ? `http://localhost:3000/product/listname/${value}` : `http://localhost:3000/product/list`
        $('#dg').datagrid({
            url: listurl,
            fit: "true",
            border: false,
            pagination: "true",
            toolbar: "#tb",
            columns: [[
                { field: "ck", checkbox: true },
                { field: 'name', title: '产品名称', width: 100, },
                { field: 'goodstype', title: '产品类型', width: 100 },
                {
                    field: 'import', title: '是否进口', width: 100, align: 'center',
                    formatter: function (value, row, index) {
                        if (row.import == true) {
                            return '进口'
                        } else {
                            return '国产'
                        }
                    }
                },
                {
                    field: 'date', title: '生产日期', width: 200, align: 'center',
                    formatter: function (value, row, index) {
                        return (moment(row.date).format('YYYY-MM-DD'));
                    }
                },

                {
                    field: 'price', title: '价格', width: 100, align: 'right',
                    formatter: function (value, row, index) {
                        return (row.price.toFixed(2));
                    }
                },
                { field: 'stock', title: '库存', width: 100, align: 'right' },
                { field: 'support', title: '供应商', width: 100 },
                { field: 'maked', title: '生产地', width: 100 },
                { field: 'sale', title: '销售渠道', width: 100 },
                { field: 'reply', title: '评论数', width: 100 },
                {
                    field: '_id', title: '操作', width: 100, align: 'center',
                    formatter: function (value, row, index) {
                        return `<a href="javascript:void(0)" onclick="searchcomment('${value}')">查看评论</a>  <a href="javascript:void(0)" onclick="updataData('${value}')">修改</a>&nbsp;<a href="javascript:void(0)" onclick="deleteData('${value}')">删除</a>`;
                    }
                }
            ]]
        });
    }
    function searchcomment(id) {
        alert(id)
        location.href = "http://localhost:5000/views/comment?newsid=" + id
    }

</script>